Chrome-Console篇

console.log('通用信息')     // 常规输出
console.info('提示信息')    // 带 i 图标，语义上的"通知"
console.warn('警告信息')    // 黄色背景，表示需要注意
console.error('错误信息')   // 红色背景 + 自动堆栈跟踪
console.debug('调试信息')   // 默认隐藏，需切换日志级别为 Verbose

// ❌ 不推荐：手动 if 检查
if (response.data.length === 0) {
  console.warn('返回数据为空', response)
}

// ✅ 推荐：使用 assert 自动携带堆栈信息
console.assert(response.data.length > 0, '返回数据为空', response)

console.log(
  '%c⚠️ Auth Failed %c[401] %cCheck your token',
  'color: red; font-size: 16px; font-weight: bold;',
  'background: #333; color: #ff0; padding: 2px 6px; border-radius: 3px;',
  'color: #999; font-style: italic;'
)

const log = {
  success: (msg) => console.log(`%c✓ ${msg}`, 'color: green; font-weight: bold'),
  error:   (msg) => console.log(`%c✗ ${msg}`, 'color: red; font-weight: bold'),
  info:    (msg) => console.log(`%cℹ ${msg}`, 'color: blue'),
  api:     (method, url, status) =>
    console.log(`%c${method} %c${url} %c${status}`,
      'color: cyan; font-weight: bold',
      'color: #666',
      status < 400 ? 'color: green' : 'color: red'
    )
}

log.success('User created')
log.api('POST', '/api/users', 201)

const name = 'Alice', age = 30, role = 'Developer'

// ❌ 输出 a 30 Developer —— 谁是谁？
console.log(name, age, role)

// ✅ 输出 {name: 'Alice', age: 30, role: 'Developer'}
console.log({ name, age, role })

const users = [
  { name: 'Alice', age: 25, role: 'Developer' },
  { name: 'Bob',   age: 32, role: 'Designer'  },
  { name: 'Charlie', age: 28, role: 'Manager' }
]

console.table(users)                          // 全部列
console.table(users, ['name', 'role'])        // 只显示指定列

console.group('User Profile')
console.log('Name: Alice')
console.group('Address')
console.log('City: Beijing')
console.log('Street: Main St.')
console.groupEnd()
console.groupEnd()

function fibonacci(n) {
  console.count('fib called')  // 每次调用计数器 +1
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

fibonacci(10)
// fib called: 1
// fib called: 2
// ...
// fib called: 177

console.countReset('fib called')  // 重置计数器

function deepFunction() {
  console.trace('How did I get here?')
}

function middleFunction() { deepFunction() }
function topFunction() { middleFunction() }

topFunction()
// 输出完整的调用栈：
//   deepFunction  @ VM:2
//   middleFunction @ VM:5
//   topFunction    @ VM:6

console.time('data-transform')

// 执行耗时操作
const result = largeArray.map(heavyTransform).filter(complexFilter)

console.timeLog('data-transform', 'Map+Filter done')  // 输出阶段计时

const sorted = result.sort(comparator)

console.timeEnd('data-transform')  // 输出总耗时
// data-transform: 234.56ms

// 需要先在 Performance 面板开始录制
console.timeStamp('开始渲染列表')
renderList(data)
console.timeStamp('列表渲染完成，开始绑定事件')
bindEvents()
console.timeStamp('事件绑定完成')

console.profile('Expensive Calc')
expensiveCalculation()
console.profileEnd('Expensive Calc')
// Performance 面板会自动生成一份分析报告

// $(selector) —— 等同于 document.querySelector
$('.header')                // 返回第一个匹配元素
$('#main .content > p')     // 支持复杂选择器

// $$(selector) —— 等同于 document.querySelectorAll，但返回数组！
$$('.item')                 // 返回数组，不是 NodeList
$$('.item').map(el => el.textContent)   // 直接使用数组方法
$$('img[data-src]').filter(img => !img.src)  // 找到未加载的懒加载图片

// 在 Elements 面板选中一个表格行后
$0.closest('table')         // 找到最近的表格
$0.querySelector('.price')  // 查找价格元素
$0.getBoundingClientRect()  // 获取位置尺寸
$0.style.transform = 'rotate(5deg)'  // 直接修改样式（仅临时）

// 比较最新的两次选择
$0 === $1  // 比较两个元素是否相同

2 + 2           // → 4
$_ * 5          // → 20

await fetch('/api/users')
$_              // → Response 对象
await $_.json() // → 解析后的数据

$$('.product')      // 返回产品列表
$_                      // → 产品元素数组
$_.length               // → 产品数量

copy($0)                  // 复制 HTML 元素
copy($_.map(u => u.name)) // 复制处理后的数据
copy(JSON.stringify($_, null, 2))  // 复制格式化的 JSON
copy(location.href)       // 复制当前 URL

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0)
}

monitor(calculateTotal)
// 之后每次调用 calculateTotal，Console 都会打印：
// function calculateTotal called with arguments: [Array(5)]

// 停止监控
unmonitor(calculateTotal)

// 监控单个事件类型
monitorEvents(window, 'resize')

// 监控多个事件
monitorEvents($0, ['click', 'keydown', 'focus'])

// 事件类型映射
monitorEvents($0, 'mouse')    // mousedown, mouseup, click, dblclick 等
monitorEvents($0, 'key')      // keydown, keyup, keypress
monitorEvents($0, 'touch')    // touchstart, touchend 等

// 停止监控
unmonitorEvents($0)

class User {
  constructor(name) { this.name = name }
}

const a = new User('Alice')
const b = new User('Bob')

queryObjects(User)    // → [User {name: 'Alice'}, User {name: 'Bob'}]

// 高级用法：检查是否泄漏了特定类型的对象
queryObjects(Promise)  // 未 resolve 的 Promise 数量
queryObjects(HTMLDivElement)  // 内存中所有 div 元素

// 发起 API 请求
const resp = await fetch('https://api.github.com/users/google')
const data = await resp.json()
console.table(data)

// 探索浏览器 API
await navigator.storage.estimate()
// → {quota: ..., usage: ...}

await (await fetch('/api/health')).json()
// → {status: 'ok', uptime: 12345}

document.activeElement          // 当前焦点元素
document.querySelectorAll('.toast').length  // Toast 数量
document.visibilityState        // 页面可见状态
performance.memory.usedJSHeapSize  // 内存使用

// 在循环中设置 Logpoint：`当前 i: ${i}, 当前值: ${arr[i]}`
// Console 输出每轮迭代的变量值，但代码不暂停

const user = { name: 'Alice', age: 30 }

console.log(user)     // 你期望看到 {name: 'Alice', age: 30}
user.name = 'Bob'     // 修改属性
user.age = 31

// Console 中展开对象，你看到的是 {name: 'Bob', age: 31}
// 这看起来像 console.log 发生在修改之后！

// 方案 1: 打印深拷贝
console.log(JSON.parse(JSON.stringify(user)))
// 局限性：丢失函数、Symbol、undefined、循环引用

// 方案 2: 使用断点
// 在目标行设置断点，在 Scope 面板中查看变量的精确快照

// 方案 3: 打印原始属性值
console.log(user.name, user.age)  // 原始类型不受此问题影响

// 方案 4: 使用 console.dir
console.dir(user)  // 同样是引用，但展示方式更结构化

window.devtoolsFormatters = [{
  header(obj, config) {
    // 返回 JsonML 数组作为折叠视图
    // 返回 null 表示不处理，交给下一个 formatter
  },
  hasBody(obj, config) {
    // 返回 true 表示对象可展开
  },
  body(obj, config) {
    // 返回 JsonML 数组作为展开内容
  }
}]

class AppState {
  constructor(initial = {}) {
    Object.assign(this, initial)
  }
}

window.devtoolsFormatters = [{
  header(obj) {
    if (!(obj instanceof AppState)) return null

    return ['div', {
      style: `
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 6px;
        font-weight: bold;
      `
    },
      `📦 AppState { ${Object.keys(obj).join(', ')} }`
    ]
  },
  hasBody(obj) {
    return obj instanceof AppState
  },
  body(obj) {
    return ['ol',
      ...Object.entries(obj).map(([key, val]) =>
        ['li', {},
          ['strong', {}, `${key}: `],
          ['span', { style: 'color: #666;' }, JSON.stringify(val)]
        ]
      )
    ]
  }
}]